<template>
  <div>
    <el-col :xs="24">
      <el-card>
        <el-tabs v-model="activeTab">
          <el-tab-pane label="信息栏" name="Table">
            <el-row :gutter="24" class="header">
              <el-col :span="16">
                <el-carousel :interval="4000" type="card" height="200px">
                  <el-carousel-item v-for="item in paiming" :key="item">
                    <h1 class="medium">{{ "今日名人:" + item }}</h1>
                  </el-carousel-item>
                </el-carousel>
              </el-col>
              <el-col
                :span="8"
              ><el-card class="paiming" shadow="always">
                <h2>本周榜样之星</h2>
                <h3>{{ "第一名:" + paiming[0] }}</h3>
                <h3>{{ "第二名:" + paiming[1] }}</h3>
                <h3>{{ "第三名:" + paiming[2] }}</h3>
              </el-card></el-col>
            </el-row>

            <el-row :gutter="24" style="margin-bottom: 15px">
              <el-col :span="3">
                <el-tag class="good">优秀:90-100分</el-tag>
              </el-col>
              <el-col :span="3">
                <el-tag class="well">良好:80-89分</el-tag>
              </el-col>
              <el-col :span="3">
                <el-tag class="ordinary">一般:70-79分</el-tag>
              </el-col>
              <el-col :span="3">
                <el-tag class="qualified">合格:60-69分</el-tag>
              </el-col>
              <el-col :span="3">
                <el-tag class="fail">不及格:60分以下</el-tag>
              </el-col>
              <el-col :span="6">
                <el-alert
                  title=" 鼠标移上去可查看具体分数"
                  type="info"
                  effect="dark"
                  show-icon
                  :closable="false"
                />
              </el-col>
              <el-col :span="3">
                <el-popover
                  placement="top-start"
                  title="规则"
                  width="200"
                  trigger="hover"
                  content="这是一些规则!点击查看"
                  style="margin-left: 50px"
                >
                  <el-button
                    slot="reference"

                    class="rule_button"
                    icon="el-icon-warning-outline"
                    size="mini"
                    @click="table = true"
                  />
                </el-popover>
              </el-col>
            </el-row>
            <table1 />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>

    <el-dialog title="扣分规则" :visible.sync="table" size="50%">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item title="安全" name="1">
          <div>
            1.每家食品类摊主都必须保证自家食品的安全问题，如遇客户投诉食品质量，予以一定程度的信誉分扣分，累计一个梯度的扣分则降低一级信誉等级，严重的可直接禁止摊主摆摊。
          </div>
          <div>
            2.某些小吃摊会自带煤气罐进行食品加工，在一开始的商家注册时就应该要求（禁止此类具有安全隐患的物品出现在我们的地摊摊位中；
            或允许此类物品出现在地摊中，但要严格检查保证此类物品的安全性）我们每日会有巡逻人员对各个区域的地摊摆摊状况进行巡查，如遇不达标者进行扣分或降等级处理。
          </div>
        </el-collapse-item>
        <el-collapse-item title="环境" name="2">
          <div>
            1.每家摊主都应该保持自家摊位的卫生整洁度，每日的巡逻检查也会对各摊主的摊位进行卫生等级评定，此评定也会显示在摊主的摊位信息页面上。
          </div>
          <div>
            2.除了摊位的整洁，摊户自身的卫生也需要达到一定的标准。某些食品摊户也需要保证自己食品工具的卫生；
            非食品类也需做到干净整洁。如遇客户投诉和训练检查不合规，则予以扣分或降级处理。
          </div>
          <div>
            3.摊主需要在摆摊过程中具有极高的自觉性，严格规范自己的言行举止，遵守规定，在和谐美好中构建一个井然有序的地摊市场。
          </div>
        </el-collapse-item>
        <el-collapse-item title="标准" name="3">
          <div>
            1.未在规定时间收摊
          </div>
          <div>
            2.卖的东西太杂乱
          </div>

        </el-collapse-item>
      </el-collapse>
    </el-dialog>
  </div>
</template>

<script>
import Table1 from './components/Table'

export default {
  name: 'Credit',
  components: {
    Table1
  },
  data() {
    return {
      activeTab: 'Table',
      table: false,
      activeName: '1',
      paiming: ['莫寒', '雷鹏', '唐树泽']
    }
  }
}
</script>

<style  scoped>
.el-carousel {
  width: 100%;
}
.el-carousel__item h1 {
  color: #475669;
  font-family: "楷体";
  line-height: 200px;
  margin: 0;
}
h2,
h3 {
  color: #475669;
  font-family: "宋体";
  text-align: center;
  line-height: 20px;
}

.el-carousel__item:nth-child(5) {
  background-image: url(../../../assets/images/develop/credit/banner4.jpg);
   background-size: cover !important;
  background-repeat: no-repeat;
  overflow: hidden;
}

.el-carousel__item:nth-child(4) {
  background-image: url(../../../assets/images/develop/credit/banner3.jpg);
   background-size: cover !important;
  background-repeat: no-repeat;
  overflow: hidden;
}

.el-carousel__item:nth-child(3) {
  background-image: url(../../../assets/images/develop/credit/banner2.jpg);
   background-size: cover !important;
  background-repeat: no-repeat;
  overflow: hidden;
}
.paiming {
  height: 220px;
  background: url('../../../assets/images/develop/credit/banner0.jpg') center / 100% no-repeat;
  background-size: cover !important;
}
.header {
  margin-bottom: 10px;
}
.rule_button{
  background-color: tomato;
  border-radius: 10px;
  color: #fff;
  border: none;
}
.rule_button:hover{
  background-color: rgb(253, 27, 27);
  border-radius: 10px;
  color: #fff;
  border: none;
}
.good{
  background-color:rgb(239, 242, 255);
  color: rgb(78, 102, 238);
  border-color: rgb(199, 235, 238) !important;
}
.well{
  background-color:rgb(239, 255, 254);
  color: rgb(112, 216, 207);
  border-color: rgb(209, 235, 229) !important;
}
.ordinary{
  background-color:rgb(255, 247, 223);
  color: rgb(253, 173, 25);
  border-color:  rgb(231, 225, 171) !important;
}
.qualified{
  background-color:rgb(239, 247, 255);
  color: rgb(112, 111, 112);
  border-color:  rgb(235, 232, 232) !important;
}
.fail{
  background-color:rgb(255, 218, 218);
  color: rgb(255, 0, 0);
  border-color:  rgb(236, 196, 196);
}
</style>
